<script>
import { defineComponent, reactive, ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/stores/user.js";

export default defineComponent({
  setup() {
    const store = useUserInfo();

    const router = useRouter();
    const formRef = ref(null);
    const model = reactive({
      userName: null,
      password: null,
    });
    const rules = {
      userName: [
        {
          required: true,
          message: "请输入账号",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
        },
      ],
    };

    function login(e) {
      axios({
        method: "post",
        url: "/userInfo/backLogin",
        params: {
          userName: model.userName,
          password: model.password,
        },
        noToken: true,
      }).then(function (response) {
        store.setToken(response.data.data);
        router.replace("/");
      });
    }

    return {
      formRef,
      model,
      rules,
      login,
    };
  },
});
</script>

<template>
  <div class="topdiv">
    <span class="topspan">后台管理系统</span>
  </div>
  <div class="parentdiv">
    <div class="sondiv">
      <n-form ref="formRef" :model="model" :rules="rules" style="width: 60%">
        <n-form-item path="userName" label="账号">
          <n-input v-model:value="model.userName" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            v-model:value="model.password"
            type="password"
            @keydown.enter.prevent
            show-password-on="click"
          />
        </n-form-item>
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div style="display: flex; justify-content: flex-end">
              <n-button
                :disabled="model.userName === null"
                type="primary"
                @click="login"
              >
                登录
              </n-button>
            </div>
          </n-col>
        </n-row>
      </n-form>
    </div>
  </div>
</template>

<style>
.sondiv {
  height: 300px;
  width: 600px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 20px 2px #0000001a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parentdiv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
  margin-top: 140px;
}
</style>
